import nav from './styles/navict.module.css'
import { Input } from 'antd'
import { useNavigate } from 'react-router-dom'

interface Menu {
    title: string,
    url: string
}

interface User {
    title: string,
    url: string,
    icon: string
}

const menu: Array<Menu> = [
    {
        title:'首页',
        url:'/'
    },
    {
        title:'分类',
        url:'/category'
    },
    {
        title:'排行',
        url:'/ranking'
    },
    {
        title:'书库',
        url:'/finish'
    },
    {
        title:'完本',
        url:'/finish'
    }
]

const userMenu: Array<User> = [
    {
        title:'历史',
        url:'/',
        icon:'user-plus'
    },
    {
        title:'书架',
        url:'/library',
        icon:'user-plus'
    },
    {
        title:'登录',
        url:'/login',
        icon:'user'
    }

]

const Navict: React.FC = () => {
    const navigator = useNavigate()
    const toPage = (url: string): void => {
        console.log(url);
        
        navigator(url)
    }
    return (
        <div className={nav.app}>
            <div className={nav.container}>
                <div className={nav.logo}>
                    <a href="/">
                        <img className={nav.img} src="https://revo.zongheng.com/comm/2024/87d13bef.png" alt="navict" />
                    </a>
                </div>
                <div className={nav.menu}>
                    {
                        menu.map((item, index) => {
                            return (
                                <div key={index} onClick={() => toPage(item.url)} className={nav.menu_item}>
                                    <div className={nav.item}>{item.title}</div>
                                </div>
                            )
                        })
                    }
                </div>
                <div className={nav.search}>
                    <div className={nav.search_input}>
                        <Input placeholder="搜索好书" variant="borderless" />
                    </div>
                </div>
                <div className={nav.user}>
                    {
                        userMenu.map((item, index) => (
                            <div onClick={() => toPage(item.url)} key={index} className={nav.user_menu}>
                                <span>{item.title}</span>
                            </div>
                        ))
                    }
                </div>
            </div>
        </div>
    )
}

export default Navict